<template>
  <div class="app-container">
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="postForm"
      label-position="right"
      label-width="100px"
      style="width: 600px; margin-left:50px;"
    >
      <el-form-item label="id" prop="id" hidden>
        <el-input v-model="postForm.id" clearable placeholder="id" maxlength="10" :disabled="formDisabled" />
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="postForm.name" clearable placeholder="姓名" maxlength="10" :disabled="formDisabled" />
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="postForm.age" clearable placeholder="年龄" maxlength="10" :disabled="formDisabled" />
      </el-form-item>
      <el-form-item label="身高" prop="height">
        <el-input v-model="postForm.height" clearable placeholder="身高" maxlength="5" :disabled="formDisabled" />
      </el-form-item>
      <el-form-item label="生日" prop="birth">
        <el-input v-model="postForm.birth" clearable placeholder="生日" maxlength="0" :disabled="formDisabled" />
      </el-form-item>
      <el-form-item label="创建日期" prop="create1">
        <el-input v-model="postForm.create1" clearable placeholder="创建日期" maxlength="0" :disabled="formDisabled" />
      </el-form-item>
      <el-form-item label="测试" prop="test">
        <el-input v-model="postForm.test" clearable placeholder="测试" maxlength="255" :disabled="formDisabled" />
      </el-form-item>
      <el-form-item>
        <el-button @click="back()">返回</el-button>
        <el-button v-if="submitHidden===false" type="primary" @click="submitForm">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { addDicPerson, updateDicPerson, getDicPerson } from '@/api/dic/person'
import msgUtil from '@/utils/msgUtil'
import routerUtil from '@/utils/routerUtil'

const defaultForm = {
  id: null, name: null, age: null, height: null, birth: null, create1: null, test: null
}

export default {
  name: 'DicPersonDetail',
  props: {
    operaType: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      id: this.$route.query.id,
      postForm: Object.assign({}, defaultForm),
      formDisabled: false, // 表单是否禁用
      submitHidden: false, // 提交按钮是否隐藏
      rules: {
        name: [{ required: true, trigger: 'blur', message: '姓名不能为空' }]
      }
    }
  },
  created() {
    if (this.operaType === 2) {
      this.getDicPerson(this.id)
    } else if (this.operaType === 3) {
      this.getDicPerson(this.id)
      this.formDisabled = true
      this.submitHidden = true
    } else {
      this.loading = false
    }
  },
  methods: {
    // 修改
    updateDicPerson() {
      updateDicPerson(this.postForm).then(response => {
        msgUtil.success()
        routerUtil.backPath(this, '/dic/person/index')
      })
    },
    // 新增
    addDicPerson() {
      addDicPerson(this.postForm).then(response => {
        msgUtil.success()
        routerUtil.backPath(this, '/dic/person/index')
      })
    },
    // 返回
    back() {
      routerUtil.backPath(this, '/dic/person/index')
    },
    // 提交form
    submitForm() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          if (this.operaType === 2) {
            this.updateDicPerson()
          } else if (this.operaType === 1) {
            this.addDicPerson()
          }
        }
      })
    },
    // 获取角色信息并赋值给当前页面
    getDicPerson(id) {
      getDicPerson({ id: id }).then(response => {
        this.postForm = response.data
      })
    }
  }
}
</script>
